<template>
  <div>
    <a-row :gutter="[{ xs: 2, sm: 4, md: 6, lg: 8 }, { xs: 2, sm: 4, md: 6, lg: 8 }]">
      <a-col :lg="24" :xl="11">
        <a-card class="card">
          <div class="table-container">
          <!--字典搜索区域-->
          <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
              <a-row :gutter="14">
                <a-col :span="10">
                  <a-form-item label="名称">
                    <a-input v-model="queryParam.name" placeholder="输入名称" />
                  </a-form-item>
                </a-col>
                <span style="overflow: hidden;" class="table-page-search-submitButtons">
                  <a-col :span="12">
                    <a-button type="primary" @click="searchQuery" icon="search">
                      搜索
                    </a-button>
                    <a-button :style="{ marginLeft: '8px' }" @click="handleReset" icon="reload">
                      重置
                    </a-button>
                  </a-col>
                </span>
              </a-row>
            </a-form>
          </div>
          <!--操作区域-->
          <div class="table-operator">
            <a-row>
              <a-col style="display: inline-block;">
                <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
                <a-button type="primary" icon="edit" @click="handleEdit(selectionRows[0])"
                  :disabled="disEdit">修改</a-button>
                <a-button type="danger" icon="delete" @click="batchDel" :disabled="disDelete">删除
                </a-button>
                <a-button type="primary" icon="download">导出</a-button>
                <a-button @click="refreshCache" type="primary">刷新缓存</a-button>
              </a-col>
            </a-row>
          </div>
          <!-- table区域-begin -->
          <div>
            <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
              :columns="columns" :loading="loading" :data-source="dataSource"
              :rowKey="record=>record.id" :pagination="ipagination" bordered
              :scroll="{ x: 'max-content'}" :customRow="
                     rowClick">
              <span slot="action" slot-scope="text, record">
                <ry-tooltip-button title="编辑" type="primary" icon="edit"
                  @click="handleEdit(record)" />
                <ry-tooltip-button title="删除" type="danger" icon="delete"
                  @click="handleDelete(record.id)" />
              </span>
            </a-table>
          </div>
          </div>
          <!-- table区域-end -->
        </a-card>
      </a-col>
      <a-col :lg="24" :xl="13">
        <a-card class="card" title="字典详情">
          <a-button slot="extra" type="primary" size="small" icon="plus" :disabled="disAdd"
            @click="open(parent)">新增</a-button>
          <!-- table区域-begin -->
          <div>
            <a-table :columns="rColumns" :loading="rLoading" :data-source="detailData"
              :rowKey="record=>record.id" :pagination="rPage">
              <span slot="showParent">
                <span>{{parent.name}}</span>
              </span>
              <span slot="action" slot-scope="text, record">
                <ry-tooltip-button title="编辑" type="primary" icon="edit"
                  @click="open(parent, record)" />
                <a-popconfirm title="确定删除吗?" @confirm="() => deleteDict(record.id)">
                  <a-button type="danger" icon="delete" />
                </a-popconfirm>
              </span>
            </a-table>
          </div>
          <!-- table区域-end -->
        </a-card>
      </a-col>
    </a-row>
    <!--弹窗区-->
    <RModal ref="modalForm" :url="url" @ModalOk="modalFormOk"></RModal>
    <LModal ref="modalDetail" :url="url" @LModalOk="loadDetail(parent)"></LModal>
  </div>
</template>

<script>
import { RyListMixin } from '@/ryweb'
import RModal from './DictModal.vue'
import LModal from './DictDetailsModal.vue'
import { mapActions } from 'vuex'
export default {
  name: 'Dict',
  mixins: [RyListMixin],
  components: { RModal, LModal },
  data () {
    return {
      url: {
        list: this.$api.system.dict.dict, // post
        selectById: this.$api.system.dict.byId, // get
        add: this.$api.system.dict.insert, // post
        edit: this.$api.system.dict.update, // post
        delete: this.$api.system.dict.delete, // post
        deleteBatch: this.$api.system.dict.delete, // post
        checkUnique: this.$api.system.dict.checkUnique, // get
        refreshCache: this.$api.system.dict.refreshCache // get
      },
      columns: [
        {
          title: '名称',
          dataIndex: 'name',
          align: 'center'
        },
        {
          title: '描述',
          dataIndex: 'remarks',
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          width: 200,
          fixed: 'right'
        }
      ],
      // 字典详情表格列
      rColumns: [
        {
          title: '所属字典',
          align: 'center',
          dataIndex: 'parentId',
          scopedSlots: { customRender: 'showParent' }
        },
        {
          title: '字典名称',
          align: 'center',
          dataIndex: 'name'
        },
        {
          title: '字典值',
          align: 'center',
          dataIndex: 'value'
        },
        {
          title: '排序',
          align: 'center',
          dataIndex: 'sortNo'
        },
        {
          title: '操作',
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          width: 200,
          fixed: 'right'
        }
      ],
      // 点击左侧表格行事件回调
      rowClick: record => ({ on: { click: () => { this.loadDetail(record) } } }),
      rLoading: false,
      detailData: [],
      parent: {},
      rPage: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        hideOnSinglePage: false,
        total: 0,
        // pageSize 变化的回调
        onShowSizeChange: (current, pageSize) => this.rChangeSize(current, pageSize),
        onChange: (page, pageSize) => this.rPageChange(page, pageSize)
      }
    }
  },
  created () {
    this.queryParam.dictType = '01'
  },
  mounted () { },
  methods: {
    ...mapActions(['GetDictData']),
    // 重置搜索条件
    handleReset () {
      this.queryParam = { dictType: '01' }
      this.loadData(1)
    },
    // 改变右侧表格分页pageSize回调
    rChangeSize (current, pageSize) {
      this.rPage.current = current
      this.rPage.pageSize = pageSize
      this.loadDetail(this.parent)
    },
    // 右侧表格页码改变事件
    rPageChange (page, pageSize) {
      this.rPage.current = page
      this.loadDetail(this.parent)
    },
    // 点击左侧表格触发事件
    loadDetail (record) {
      this.parent = record
      let params = Object.assign({
        parentId: record.id,
        isOrderBySortNo: true,
        current: this.rPage.current,
        size: this.rPage.pageSize
      })
      this.rLoading = true
      this.$post(this.url.list, params).then(res => {
        if (this.isSuccess(res)) {
          this.showDetails = true
          this.detailData = res.data.records
          this.rPage.total = res.data.total
          this.rPage.current = Math.min(
            this.rPage.current,
            Math.ceil(this.rPage.total / this.rPage.pageSize)
          )
        }
        this.rLoading = false
      })
    },
    open (parent, record) {
      this.$refs.modalDetail.open(parent, record)
    },
    deleteDict (id) {
      let param = [id]
      this.$post(this.url.delete, param).then(res => {
        if (this.isSuccess(res)) {
          this.$message.success('删除成功')
          this.loadDetail(this.parent)
        }
      })
    },
    refreshCache () {
      this.$get(this.url.refreshCache).then(res => {
        if (this.isSuccess(res)) {
          this.GetDictData().then(res => {
            this.$message.success('刷新成功')
          })
        }
      })
    }
  },
  computed: {
    // 禁用新增按钮
    disAdd () {
      return Object.keys(this.parent).length === 0
    }
  }
}
</script>

<style scoped>
.light {
  background-color: rgba(24, 144, 255, 0.5);
}
.ant-card-head-title {
  margin-left: 14px;
}
</style>
